<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>Vue核心梳理 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="Vue,">
  

  <meta name="description" content="一、组件的核心概念-属性props几种写法 我们的开发都是围绕着options来的    &amp;lt;template&amp;gt;  &amp;lt;div&amp;gt;    name: &amp;#123;&amp;#123; name &amp;#125;&amp;#125;    &amp;lt;br /&amp;gt;    type: &amp;#123;&amp;#123; type &amp;#125;&amp;#125;    &amp;lt;br /&amp;gt;    list: &amp;#12">
<meta name="keywords" content="Vue">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue核心梳理">
<meta property="og:url" content="http://blog.poetries.top/2019/10/06/vue-review/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="一、组件的核心概念-属性props几种写法 我们的开发都是围绕着options来的    &amp;lt;template&amp;gt;  &amp;lt;div&amp;gt;    name: &amp;#123;&amp;#123; name &amp;#125;&amp;#125;    &amp;lt;br /&amp;gt;    type: &amp;#123;&amp;#123; type &amp;#125;&amp;#125;    &amp;lt;br /&amp;gt;    list: &amp;#12">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/1.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/2.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/3.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/4.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/5.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/6.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/7.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/8.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/9.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/11.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/12.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/13.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/14.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/15.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/16.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/17.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/19.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/20.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/23.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/22.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/23.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/24.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/25.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/26.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/27.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/28.png">
<meta property="og:updated_time" content="2020-08-15T04:25:31.938Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Vue核心梳理">
<meta name="twitter:description" content="一、组件的核心概念-属性props几种写法 我们的开发都是围绕着options来的    &amp;lt;template&amp;gt;  &amp;lt;div&amp;gt;    name: &amp;#123;&amp;#123; name &amp;#125;&amp;#125;    &amp;lt;br /&amp;gt;    type: &amp;#123;&amp;#123; type &amp;#125;&amp;#125;    &amp;lt;br /&amp;gt;    list: &amp;#12">
<meta name="twitter:image" content="https://poetries1.gitee.io/img-repo/2019/10/vue/1.png">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#一、组件的核心概念-属性props几种写法"><span class="toc-text">一、组件的核心概念-属性props几种写法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#二、组件的核心概念-事件"><span class="toc-text">二、组件的核心概念-事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#三、组件的核心概念-插槽"><span class="toc-text">三、组件的核心概念-插槽</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#四、双向绑定和单项数据流并不冲突"><span class="toc-text">四、双向绑定和单项数据流并不冲突</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#五、如何触发组件的更新"><span class="toc-text">五、如何触发组件的更新</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#六、合理应用计算属性和监听器"><span class="toc-text">六、合理应用计算属性和监听器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#6-1-计算属性Computed"><span class="toc-text">6.1 计算属性Computed</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-2-监听watcher"><span class="toc-text">6.2 监听watcher</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-3-computed-vs-watcher"><span class="toc-text">6.3 computed vs watcher</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#七、生命周期的应用场景和函数式组件"><span class="toc-text">七、生命周期的应用场景和函数式组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#7-1-生命周期"><span class="toc-text">7.1 生命周期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-2-函数式组件"><span class="toc-text">7.2 函数式组件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#八、Vue指令"><span class="toc-text">八、Vue指令</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#8-1-内置指令"><span class="toc-text">8.1 内置指令</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-2-自定义指令"><span class="toc-text">8.2 自定义指令</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#九、template和jsx"><span class="toc-text">九、template和jsx</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#9-1-JSX-VS-template"><span class="toc-text">9.1 JSX VS template</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-2-以下是jsx写法"><span class="toc-text">9.2 以下是jsx写法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#十、为什么需要vuex"><span class="toc-text">十、为什么需要vuex</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#十一、vuex核心概念和底层原理"><span class="toc-text">十一、vuex核心概念和底层原理</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#11-1-核心概念"><span class="toc-text">11.1 核心概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#11-2-底层原理"><span class="toc-text">11.2 底层原理</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#十二、vuex最佳实践"><span class="toc-text">十二、vuex最佳实践</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#12-1-核心概念"><span class="toc-text">12.1 核心概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-2-使用常量代替Mutation事件类型"><span class="toc-text">12.2 使用常量代替Mutation事件类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-3-命名空间"><span class="toc-text">12.3 命名空间</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-4-实践例子"><span class="toc-text">12.4 实践例子</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#十三、vue-router使用场景"><span class="toc-text">十三、vue-router使用场景</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#13-1-解决的问题"><span class="toc-text">13.1 解决的问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-2-使用方式"><span class="toc-text">13.2 使用方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-3-例子"><span class="toc-text">13.3 例子</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#十四、路由的类型及底层原理"><span class="toc-text">十四、路由的类型及底层原理</span></a></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-vue-review" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">Vue核心梳理</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2019.10.06</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 3.9k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 22分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <h2 id="一、组件的核心概念-属性props几种写法"><a href="#一、组件的核心概念-属性props几种写法" class="headerlink" title="一、组件的核心概念-属性props几种写法"></a>一、组件的核心概念-属性props几种写法</h2><blockquote>
<p>我们的开发都是围绕着<code>options</code>来的</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/1.png" alt></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/2.png" alt></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    name: &#123;&#123; name &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    type: &#123;&#123; type &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    list: &#123;&#123; list &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    isVisible: &#123;&#123; isVisible &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>&gt;</span>change type<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">"PropsDemo"</span>,</span></span><br><span class="line"><span class="javascript">  <span class="comment">// inheritAttrs: false,</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 这种写法不利于后期维护</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// props: ['name', 'type', 'list', 'isVisible'],</span></span></span><br><span class="line">  props: &#123;</span><br><span class="line"><span class="javascript">    name: <span class="built_in">String</span>,</span></span><br><span class="line">    type: &#123;</span><br><span class="line"><span class="javascript">      validator: <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 这个值必须匹配下列字符串中的一个</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> [<span class="string">"success"</span>, <span class="string">"warning"</span>, <span class="string">"danger"</span>].includes(value);</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    list: &#123;</span><br><span class="line"><span class="javascript">      type: <span class="built_in">Array</span>,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 对象或数组默认值必须从一个工厂函数获取</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="function"><span class="params">()</span> =&gt;</span> []</span></span><br><span class="line">    &#125;,</span><br><span class="line">    isVisible: &#123;</span><br><span class="line"><span class="javascript">      type: <span class="built_in">Boolean</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="literal">false</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    onChange: &#123;</span><br><span class="line"><span class="javascript">      type: <span class="built_in">Function</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    handleClick() &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 不要这么做、不要这么做、不要这么做</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// this.type = "warning";</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">      <span class="comment">// 可以，还可以更好</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.onChange(<span class="keyword">this</span>.type === <span class="string">"success"</span> ? <span class="string">"warning"</span> : <span class="string">"success"</span>);</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// 用法</span><br><span class="line">&lt;Props</span><br><span class="line">  name=&quot;Hello Vue！&quot; // 原生属性</span><br><span class="line">  :type=&quot;type&quot;</span><br><span class="line">  :is-visible=&quot;false&quot;</span><br><span class="line">  :on-change=&quot;handlePropChange&quot;</span><br><span class="line">  title=&quot;属性Demo&quot; // 原生属性</span><br><span class="line">  class=&quot;test1&quot; // 原生属性</span><br><span class="line">  :class=&quot;[&apos;test2&apos;]&quot;</span><br><span class="line">  :style=&quot;&#123; marginTop: &apos;20px&apos; &#125;&quot;</span><br><span class="line">  style=&quot;margin-top: 10px&quot; // 原生属性</span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>
<h2 id="二、组件的核心概念-事件"><a href="#二、组件的核心概念-事件" class="headerlink" title="二、组件的核心概念-事件"></a>二、组件的核心概念-事件</h2><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/3.png" alt></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    name: &#123;&#123; name || "--" &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">:value</span>=<span class="string">"name"</span> @<span class="attr">change</span>=<span class="string">"handleChange"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> @<span class="attr">click</span>=<span class="string">"handleDivClick"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"handleClick"</span>&gt;</span>重置成功<span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click.stop</span>=<span class="string">"handleClick"</span>&gt;</span>重置失败<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">"EventDemo"</span>,</span></span><br><span class="line">  props: &#123;</span><br><span class="line"><span class="javascript">    name: <span class="built_in">String</span></span></span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    handleChange(e) &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$emit(<span class="string">"change"</span>, e.target.value);</span></span><br><span class="line">    &#125;,</span><br><span class="line">    handleDivClick() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$emit(<span class="string">"change"</span>, <span class="string">""</span>);</span></span><br><span class="line">    &#125;,</span><br><span class="line">    handleClick(e) &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 都会失败</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">//e.stopPropagation();</span></span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="三、组件的核心概念-插槽"><a href="#三、组件的核心概念-插槽" class="headerlink" title="三、组件的核心概念-插槽"></a>三、组件的核心概念-插槽</h2><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/4.png" alt></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"> <span class="tag">&lt;<span class="name">a-tab-pane</span> <span class="attr">key</span>=<span class="string">"slot"</span> <span class="attr">tab</span>=<span class="string">"插槽"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>2.6 新语法<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">SlotDemo</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span>&gt;</span>default slot<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>title slot1<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>title slot2<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:item</span>=<span class="string">"props"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>item slot-scope &#123;&#123; props &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">SlotDemo</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>老语法<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">SlotDemo</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span>&gt;</span>default slot<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"title"</span>&gt;</span>title slot1<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"title"</span>&gt;</span>title slot2<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"item"</span> <span class="attr">slot-scope</span>=<span class="string">"props"</span>&gt;</span>item slot-scope &#123;&#123; props &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">SlotDemo</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a-tab-pane</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> Slot <span class="keyword">from</span> <span class="string">"./Slot"</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">  components: &#123;</span><br><span class="line">    SlotDemo: Slot</span><br><span class="line">  &#125;,</span><br><span class="line"><span class="javascript">  data: <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      name: <span class="string">""</span>,</span></span><br><span class="line"><span class="javascript">      type: <span class="string">"success"</span>,</span></span><br><span class="line"><span class="javascript">      bigPropsName: <span class="string">"Hello world!"</span></span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- Slot.vue --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">slot</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">"title"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">"item"</span> <span class="attr">v-bind</span>=<span class="string">"&#123; value: 'vue' &#125;"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">"SlotDemo"</span></span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/5.png" alt></p>
<p><strong>大属性例子</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!--子组件 bigProps.vue--&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    &#123;&#123; name &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"handleChange"</span>&gt;</span>change name<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &#123;&#123; slotDefault &#125;&#125; --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">VNodes</span> <span class="attr">:vnodes</span>=<span class="string">"slotDefault"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">VNodes</span> <span class="attr">:vnodes</span>=<span class="string">"slotTitle"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">VNodes</span> <span class="attr">:vnodes</span>=<span class="string">"slotScopeItem(&#123; value: 'vue' &#125;)"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">"BigProps"</span>,</span></span><br><span class="line">  components: &#123;</span><br><span class="line">    VNodes: &#123;</span><br><span class="line"><span class="javascript">      functional: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      render: <span class="function">(<span class="params">h, ctx</span>) =&gt;</span> ctx.props.vnodes</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  props: &#123;</span><br><span class="line"><span class="javascript">    name: <span class="built_in">String</span>,</span></span><br><span class="line">    onChange: &#123;</span><br><span class="line"><span class="javascript">      type: <span class="built_in">Function</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;</span></span><br><span class="line">    &#125;,</span><br><span class="line"><span class="javascript">    slotDefault: <span class="built_in">Array</span>,</span></span><br><span class="line"><span class="javascript">    slotTitle: <span class="built_in">Array</span>,</span></span><br><span class="line">    slotScopeItem: &#123;</span><br><span class="line"><span class="javascript">      type: <span class="built_in">Function</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    handleChange() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.onChange(<span class="string">"Hello vue!"</span>);</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!--父组件调用--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a-tab-pane</span> <span class="attr">key</span>=<span class="string">"bigProps"</span> <span class="attr">tab</span>=<span class="string">"大属性"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">BigProps</span></span></span><br><span class="line"><span class="tag">      <span class="attr">:name</span>=<span class="string">"bigPropsName"</span></span></span><br><span class="line"><span class="tag">      <span class="attr">:on-change</span>=<span class="string">"handleBigPropChange"</span></span></span><br><span class="line"><span class="tag">      <span class="attr">:slot-default</span>=<span class="string">"getDefault()"</span></span></span><br><span class="line"><span class="tag">      <span class="attr">:slot-title</span>=<span class="string">"getTitle()"</span></span></span><br><span class="line"><span class="tag">      <span class="attr">:slot-scope-item</span>=<span class="string">"getItem"</span></span></span><br><span class="line"><span class="tag">    /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a-tab-pane</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="四、双向绑定和单项数据流并不冲突"><a href="#四、双向绑定和单项数据流并不冲突" class="headerlink" title="四、双向绑定和单项数据流并不冲突"></a>四、双向绑定和单项数据流并不冲突</h2><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/6.png" alt></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/7.png" alt></p>
<h2 id="五、如何触发组件的更新"><a href="#五、如何触发组件的更新" class="headerlink" title="五、如何触发组件的更新"></a>五、如何触发组件的更新</h2><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/8.png" alt></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/9.png" alt></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/11.png" alt></p>
<h2 id="六、合理应用计算属性和监听器"><a href="#六、合理应用计算属性和监听器" class="headerlink" title="六、合理应用计算属性和监听器"></a>六、合理应用计算属性和监听器</h2><h3 id="6-1-计算属性Computed"><a href="#6-1-计算属性Computed" class="headerlink" title="6.1 计算属性Computed"></a>6.1 计算属性Computed</h3><ul>
<li>减少模板中的计算逻辑</li>
<li>数据缓存</li>
<li>依赖固定的数据类型（响应式数据）</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>Reversed message1: "&#123;&#123; reversedMessage1 &#125;&#125;"<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>Reversed message2: "&#123;&#123; reversedMessage2() &#125;&#125;"<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; now &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"() =&gt; $forceUpdate()"</span>&gt;</span>forceUpdate<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"message"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">  data() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      message: <span class="string">"hello vue"</span></span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed: &#123;</span><br><span class="line"><span class="javascript">    <span class="comment">// 计算属性的 getter</span></span></span><br><span class="line"><span class="javascript">    reversedMessage1: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"执行reversedMessage1"</span>);</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> <span class="keyword">this</span>.message</span></span><br><span class="line"><span class="javascript">        .split(<span class="string">""</span>)</span></span><br><span class="line">        .reverse()</span><br><span class="line"><span class="javascript">        .join(<span class="string">""</span>);</span></span><br><span class="line">    &#125;,</span><br><span class="line"><span class="javascript">    now: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> <span class="built_in">Date</span>.now();</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line"><span class="javascript">    reversedMessage2: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"执行reversedMessage2"</span>);</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> <span class="keyword">this</span>.message</span></span><br><span class="line"><span class="javascript">        .split(<span class="string">""</span>)</span></span><br><span class="line">        .reverse()</span><br><span class="line"><span class="javascript">        .join(<span class="string">""</span>);</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="6-2-监听watcher"><a href="#6-2-监听watcher" class="headerlink" title="6.2 监听watcher"></a>6.2 监听watcher</h3><ul>
<li>更加灵活通用</li>
<li><code>watcher</code>可以执行任何逻辑，包括函数节流、ajax异步获取数据</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    &#123;&#123; $data &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"() =&gt; (a += 1)"</span>&gt;</span>a+1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  data: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line">      a: 1,</span><br><span class="line">      b: &#123; c: 2, d: 3 &#125;,</span><br><span class="line">      e: &#123;</span><br><span class="line">        f: &#123;</span><br><span class="line">          g: 4</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      h: []</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  watch: &#123;</span><br><span class="line"><span class="javascript">    a: <span class="function"><span class="keyword">function</span>(<span class="params">val, oldVal</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.b.c += <span class="number">1</span>;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"new: %s, old: %s"</span>, val, oldVal);</span></span><br><span class="line">    &#125;,</span><br><span class="line"><span class="javascript">    <span class="string">"b.c"</span>: <span class="function"><span class="keyword">function</span>(<span class="params">val, oldVal</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.b.d += <span class="number">1</span>;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"new: %s, old: %s"</span>, val, oldVal);</span></span><br><span class="line">    &#125;,</span><br><span class="line"><span class="javascript">    <span class="string">"b.d"</span>: <span class="function"><span class="keyword">function</span>(<span class="params">val, oldVal</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.e.f.g += <span class="number">1</span>;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"new: %s, old: %s"</span>, val, oldVal);</span></span><br><span class="line">    &#125;,</span><br><span class="line">    e: &#123;</span><br><span class="line"><span class="javascript">      handler: <span class="function"><span class="keyword">function</span>(<span class="params">val, oldVal</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.h.push(<span class="string">"😄"</span>);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">"new: %s, old: %s"</span>, val, oldVal);</span></span><br><span class="line">      &#125;,</span><br><span class="line"><span class="javascript">      deep: <span class="literal">true</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    h(val, oldVal) &#123;</span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"new: %s, old: %s"</span>, val, oldVal);</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>watcher中使用节流</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    &#123;&#123; fullName &#125;&#125;</span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>firstName: <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"firstName"</span> /&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>lastName: <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"lastName"</span> /&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  data: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      firstName: <span class="string">"Foo"</span>,</span></span><br><span class="line"><span class="javascript">      lastName: <span class="string">"Bar"</span>,</span></span><br><span class="line"><span class="javascript">      fullName: <span class="string">"Foo Bar"</span></span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  watch: &#123;</span><br><span class="line"><span class="javascript">    firstName: <span class="function"><span class="keyword">function</span>(<span class="params">val</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      clearTimeout(<span class="keyword">this</span>.firstTimeout);</span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.firstTimeout = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.fullName = val + <span class="string">" "</span> + <span class="keyword">this</span>.lastName;</span></span><br><span class="line">      &#125;, 500);</span><br><span class="line">    &#125;,</span><br><span class="line"><span class="javascript">    lastName: <span class="function"><span class="keyword">function</span>(<span class="params">val</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      clearTimeout(<span class="keyword">this</span>.lastTimeout);</span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.lastTimeout = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.fullName = <span class="keyword">this</span>.firstName + <span class="string">" "</span> + val;</span></span><br><span class="line">      &#125;, 500);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="6-3-computed-vs-watcher"><a href="#6-3-computed-vs-watcher" class="headerlink" title="6.3 computed vs watcher"></a>6.3 computed vs watcher</h3><ul>
<li><code>computed</code> 能做的，<code>watcher</code> 都可以做，反之不行</li>
<li>能用computed的尽量使用<code>computed</code></li>
</ul>
<h2 id="七、生命周期的应用场景和函数式组件"><a href="#七、生命周期的应用场景和函数式组件" class="headerlink" title="七、生命周期的应用场景和函数式组件"></a>七、生命周期的应用场景和函数式组件</h2><h3 id="7-1-生命周期"><a href="#7-1-生命周期" class="headerlink" title="7.1 生命周期"></a>7.1 生命周期</h3><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/12.png" alt></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/13.png" alt></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/14.png" alt></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/15.png" alt></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    &#123;&#123; log("render") &#125;&#125;</span><br><span class="line">    &#123;&#123; now &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"start = !start"</span>&gt;</span>&#123;&#123; start ? "停止" : "开始" &#125;&#125;<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> moment <span class="keyword">from</span> <span class="string">"moment"</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  data: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="string">"data"</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">this</span>.moment = moment;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">this</span>.log = <span class="built_in">window</span>.console.log;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      now: moment(<span class="keyword">new</span> <span class="built_in">Date</span>()).format(<span class="string">"YYYY-MM-DD HH:mm:ss"</span>),</span></span><br><span class="line"><span class="javascript">      start: <span class="literal">false</span></span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  watch: &#123;</span><br><span class="line">    start() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.startClock();</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  beforeCreate() &#123;</span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="string">"beforeCreate"</span>);</span></span><br><span class="line">  &#125;,</span><br><span class="line">  created() &#123;</span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="string">"created"</span>);</span></span><br><span class="line">  &#125;,</span><br><span class="line">  beforeMount() &#123;</span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="string">"beforeMount"</span>);</span></span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="string">"mounted"</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">this</span>.startClock();</span></span><br><span class="line">  &#125;,</span><br><span class="line">  beforeUpdate() &#123;</span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="string">"beforeUpdate"</span>);</span></span><br><span class="line">  &#125;,</span><br><span class="line">  updated() &#123;</span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="string">"updated"</span>);</span></span><br><span class="line">  &#125;,</span><br><span class="line">  beforeDestroy() &#123;</span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="string">"beforeDestroy"</span>);</span></span><br><span class="line"><span class="javascript">    clearInterval(<span class="keyword">this</span>.clockInterval);</span></span><br><span class="line">  &#125;,</span><br><span class="line">  destroyed() &#123;</span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="string">"destroyed"</span>);</span></span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    startClock() &#123;</span><br><span class="line"><span class="javascript">      clearInterval(<span class="keyword">this</span>.clockInterval);</span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span> (<span class="keyword">this</span>.start) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.clockInterval = setInterval(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">this</span>.now = moment(<span class="keyword">new</span> <span class="built_in">Date</span>()).format(<span class="string">"YYYY-MM-DD HH:mm:ss"</span>);</span></span><br><span class="line">        &#125;, 1000);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>打印顺序 <code>beforeCreate - data - created - beforeMount - render - mounted</code></p>
</blockquote>
<h3 id="7-2-函数式组件"><a href="#7-2-函数式组件" class="headerlink" title="7.2 函数式组件"></a>7.2 函数式组件</h3><ul>
<li><code>functional：true</code></li>
<li>无状态、无实例、没有<code>this</code>上下文、没有生命周期</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// TempVar.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  functional: <span class="literal">true</span>,</span><br><span class="line">  render: <span class="function">(<span class="params">h, ctx</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> ctx.scopedSlots.default &amp;&amp; ctx.scopedSlots.default(ctx.props || &#123;&#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// Functional.vue</span><br><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">functional</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    &#123;&#123; props &#125;&#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// 使用</span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a-tabs</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">a-tab-pane</span> <span class="attr">key</span>=<span class="string">"Functional"</span> <span class="attr">tab</span>=<span class="string">"函数式组件"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">Functional</span> <span class="attr">:name</span>=<span class="string">"name"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">TempVar</span></span></span><br><span class="line"><span class="tag">          <span class="attr">:var1</span>=<span class="string">"`hello $&#123;name&#125;`"</span></span></span><br><span class="line"><span class="tag">          <span class="attr">:var2</span>=<span class="string">"destroyClock ? 'hello vue' : 'hello world'"</span></span></span><br><span class="line"><span class="tag">        &gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot</span>=<span class="string">"&#123; var1, var2 &#125;"</span>&gt;</span></span><br><span class="line">            &#123;&#123; var1 &#125;&#125;</span><br><span class="line">            &#123;&#123; var2 &#125;&#125;</span><br><span class="line">          <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">TempVar</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">a-tab-pane</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">a-tabs</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> Functional <span class="keyword">from</span> <span class="string">"./Functional"</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> TempVar <span class="keyword">from</span> <span class="string">"./TempVar"</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">  components: &#123;</span><br><span class="line">    Functional,</span><br><span class="line">    TempVar</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      destroyClock: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">      name: <span class="string">"vue"</span></span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="八、Vue指令"><a href="#八、Vue指令" class="headerlink" title="八、Vue指令"></a>八、Vue指令</h2><h3 id="8-1-内置指令"><a href="#8-1-内置指令" class="headerlink" title="8.1 内置指令"></a>8.1 内置指令</h3><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/16.png" alt></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>v-text<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-text</span>=<span class="string">"'hello vue'"</span>&gt;</span>hello world<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>v-html<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">"'&lt;span style=<span class="symbol">&amp;quot;</span>color: red<span class="symbol">&amp;quot;</span>&gt;hello vue&lt;/span&gt;'"</span>&gt;</span></span><br><span class="line">      hello world</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>v-show<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">"show"</span>&gt;</span>hello vue<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"show = !show"</span>&gt;</span>change show<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>v-if v-esle-if v-else<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"number === 1"</span>&gt;</span>hello vue &#123;&#123; number &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else-if</span>=<span class="string">"number === 2"</span>&gt;</span>hello world &#123;&#123; number &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-else</span>&gt;</span>hello geektime &#123;&#123; number &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>v-for v-bind<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"num in [1, 2, 3]"</span> <span class="attr">v-bind:key</span>=<span class="string">"num"</span>&gt;</span>hello vue &#123;&#123; num &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>v-on<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"number = number + 1"</span>&gt;</span>number++<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>v-model<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">v-model</span>=<span class="string">"message"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>v-pre<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-pre</span>&gt;</span>&#123;&#123; this will not be compiled &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>v-once<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-once</span>&gt;</span></span><br><span class="line">      &#123;&#123; number &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  data: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">this</span>.log = <span class="built_in">window</span>.console.log;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      show: <span class="literal">true</span>,</span></span><br><span class="line">      number: 1,</span><br><span class="line"><span class="javascript">      message: <span class="string">"hello"</span></span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="8-2-自定义指令"><a href="#8-2-自定义指令" class="headerlink" title="8.2 自定义指令"></a>8.2 自定义指令</h3><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/17.png" alt></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"show = !show"</span>&gt;</span></span><br><span class="line">      销毁</span><br><span class="line">    <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-if</span>=<span class="string">"show"</span> <span class="attr">v-append-text</span>=<span class="string">"`hello $&#123;number&#125;`"</span> @<span class="attr">click</span>=<span class="string">"number++"</span>&gt;</span></span><br><span class="line">      按钮</span><br><span class="line">    <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">  directives: &#123;</span><br><span class="line">    appendText: &#123;</span><br><span class="line">      bind() &#123;</span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">"bind"</span>);</span></span><br><span class="line">      &#125;,</span><br><span class="line">      inserted(el, binding) &#123;</span><br><span class="line"><span class="javascript">        el.appendChild(<span class="built_in">document</span>.createTextNode(binding.value));</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">"inserted"</span>, el, binding);</span></span><br><span class="line">      &#125;,</span><br><span class="line">      update() &#123;</span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">"update"</span>);</span></span><br><span class="line">      &#125;,</span><br><span class="line">      componentUpdated(el, binding) &#123;</span><br><span class="line">        el.removeChild(el.childNodes[el.childNodes.length - 1]);</span><br><span class="line"><span class="javascript">        el.appendChild(<span class="built_in">document</span>.createTextNode(binding.value));</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">"componentUpdated"</span>);</span></span><br><span class="line">      &#125;,</span><br><span class="line">      unbind() &#123;</span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">"unbind"</span>);</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line">      number: 1,</span><br><span class="line"><span class="javascript">      show: <span class="literal">true</span></span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="九、template和jsx"><a href="#九、template和jsx" class="headerlink" title="九、template和jsx"></a>九、template和jsx</h2><h3 id="9-1-JSX-VS-template"><a href="#9-1-JSX-VS-template" class="headerlink" title="9.1 JSX VS template"></a>9.1 JSX VS template</h3><p><strong>Template</strong></p>
<ul>
<li>学习成本低</li>
<li>大量内置指令简化开发</li>
<li>组件作用域css</li>
<li>但灵活性低</li>
</ul>
<p><strong>JSX</strong></p>
<ul>
<li>总体上很灵活</li>
</ul>
<h3 id="9-2-以下是jsx写法"><a href="#9-2-以下是jsx写法" class="headerlink" title="9.2 以下是jsx写法"></a>9.2 以下是jsx写法</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// index.vue</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> Props <span class="keyword">from</span> <span class="string">"./Props"</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> Event <span class="keyword">from</span> <span class="string">"./Event"</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> Slot <span class="keyword">from</span> <span class="string">"./Slot"</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> BigProps <span class="keyword">from</span> <span class="string">"./BigProps"</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">  components: &#123;</span><br><span class="line">    Props,</span><br><span class="line">    Event,</span><br><span class="line">    SlotDemo: Slot,</span><br><span class="line">    BigProps</span><br><span class="line">  &#125;,</span><br><span class="line"><span class="javascript">  data: <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">      name: <span class="string">""</span>,</span></span><br><span class="line"><span class="javascript">      type: <span class="string">"success"</span>,</span></span><br><span class="line"><span class="javascript">      bigPropsName: <span class="string">"Hello world!"</span></span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    handlePropChange(val) &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.type = val;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    handleEventChange(val) &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.name = val;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    handleBigPropChange(val) &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.bigPropsName = val;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    getDefault() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> [<span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>default slot<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span>];</span></span><br><span class="line">    &#125;,</span><br><span class="line">    getTitle() &#123;</span><br><span class="line"><span class="xml">      return [<span class="tag">&lt;<span class="name">p</span>&gt;</span>title slot1<span class="tag">&lt;/<span class="name">p</span>&gt;</span>, <span class="tag">&lt;<span class="name">p</span>&gt;</span>title slot2<span class="tag">&lt;/<span class="name">p</span>&gt;</span>];</span></span><br><span class="line">    &#125;,</span><br><span class="line">    getItem(props) &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> [<span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;`item slot-scope $&#123;JSON.stringify(props)&#125;`&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span>];</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  render() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> &#123;</span></span><br><span class="line">      type,</span><br><span class="line">      handlePropChange,</span><br><span class="line">      name,</span><br><span class="line">      handleEventChange,</span><br><span class="line">      bigPropsName,</span><br><span class="line">      getDefault,</span><br><span class="line">      getTitle,</span><br><span class="line">      getItem,</span><br><span class="line">      handleBigPropChange</span><br><span class="line"><span class="javascript">    &#125; = <span class="keyword">this</span>;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> slotDemoProps = &#123;</span></span><br><span class="line">      scopedSlots: &#123;</span><br><span class="line">        item(props) &#123;</span><br><span class="line"><span class="javascript">          <span class="keyword">return</span> <span class="string">`item slot-scope <span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(props)&#125;</span>`</span>;</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      props: &#123;&#125;</span><br><span class="line">    &#125;;</span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> bigProps = &#123;</span></span><br><span class="line">      props: &#123;</span><br><span class="line">        onChange: handleBigPropChange</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> (</span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">a-tabs</span>&gt;</span></span></span><br><span class="line"><span class="xml">          <span class="tag">&lt;<span class="name">a-tab-pane</span> <span class="attr">key</span>=<span class="string">"props"</span> <span class="attr">tab</span>=<span class="string">"属性"</span>&gt;</span></span></span><br><span class="line">            &lt;Props</span><br><span class="line"><span class="javascript">              name=<span class="string">"Hello Vue！"</span></span></span><br><span class="line">              type=&#123;type&#125;</span><br><span class="line"><span class="javascript">              isVisible=&#123;<span class="literal">false</span>&#125;</span></span><br><span class="line">              &#123;...&#123; props: &#123; onChange: handlePropChange &#125; &#125;&#125;</span><br><span class="line"><span class="javascript">              title=<span class="string">"属性Demo"</span></span></span><br><span class="line"><span class="javascript">              <span class="class"><span class="keyword">class</span></span>=<span class="string">"test1"</span></span></span><br><span class="line"><span class="javascript">              <span class="class"><span class="keyword">class</span></span>=&#123;[<span class="string">"test1"</span>, <span class="string">"test2"</span>]&#125;</span></span><br><span class="line"><span class="javascript">              style=&#123;&#123; <span class="attr">marginTop</span>: <span class="string">"10px"</span> &#125;&#125;</span></span><br><span class="line">            /&gt;</span><br><span class="line"><span class="xml">          <span class="tag">&lt;/<span class="name">a-tab-pane</span>&gt;</span></span></span><br><span class="line"><span class="xml">          <span class="tag">&lt;<span class="name">a-tab-pane</span> <span class="attr">key</span>=<span class="string">"event"</span> <span class="attr">tab</span>=<span class="string">"事件"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">Event</span> <span class="attr">name</span>=<span class="string">&#123;name&#125;</span> <span class="attr">onChange</span>=<span class="string">&#123;handleEventChange&#125;</span> /&gt;</span></span></span><br><span class="line"><span class="xml">          <span class="tag">&lt;/<span class="name">a-tab-pane</span>&gt;</span></span></span><br><span class="line"><span class="xml">          <span class="tag">&lt;<span class="name">a-tab-pane</span> <span class="attr">key</span>=<span class="string">"slot"</span> <span class="attr">tab</span>=<span class="string">"插槽"</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;<span class="name">SlotDemo</span> &#123;<span class="attr">...slotDemoProps</span>&#125;&gt;</span></span></span><br><span class="line"><span class="xml">              <span class="tag">&lt;<span class="name">p</span>&gt;</span>default slot<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">              <span class="tag">&lt;<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"title"</span>&gt;</span>title slot1<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">              <span class="tag">&lt;<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"title"</span>&gt;</span>title slot2<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"><span class="xml">            <span class="tag">&lt;/<span class="name">SlotDemo</span>&gt;</span></span></span><br><span class="line"><span class="xml">          <span class="tag">&lt;/<span class="name">a-tab-pane</span>&gt;</span></span></span><br><span class="line"><span class="xml">          <span class="tag">&lt;<span class="name">a-tab-pane</span> <span class="attr">key</span>=<span class="string">"bigProps"</span> <span class="attr">tab</span>=<span class="string">"大属性"</span>&gt;</span></span></span><br><span class="line">            &lt;BigProps</span><br><span class="line">              name=&#123;bigPropsName&#125;</span><br><span class="line">              &#123;...bigProps&#125;</span><br><span class="line">              slotDefault=&#123;getDefault()&#125;</span><br><span class="line">              slotTitle=&#123;getTitle()&#125;</span><br><span class="line">              slotScopeItem=&#123;getItem&#125;</span><br><span class="line">            /&gt;</span><br><span class="line"><span class="xml">          <span class="tag">&lt;/<span class="name">a-tab-pane</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">a-tabs</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// bigProps</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">"BigProps"</span>,</span></span><br><span class="line">  components: &#123;</span><br><span class="line">    VNodes: &#123;</span><br><span class="line"><span class="javascript">      functional: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      render: <span class="function">(<span class="params">h, ctx</span>) =&gt;</span> ctx.props.vnodes</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  props: &#123;</span><br><span class="line"><span class="javascript">    name: <span class="built_in">String</span>,</span></span><br><span class="line">    onChange: &#123;</span><br><span class="line"><span class="javascript">      type: <span class="built_in">Function</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;</span></span><br><span class="line">    &#125;,</span><br><span class="line"><span class="javascript">    slotDefault: <span class="built_in">Array</span>,</span></span><br><span class="line"><span class="javascript">    slotTitle: <span class="built_in">Array</span>,</span></span><br><span class="line">    slotScopeItem: &#123;</span><br><span class="line"><span class="javascript">      type: <span class="built_in">Function</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    handleChange() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.onChange(<span class="string">"Hello vue!"</span>);</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  render() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> &#123; name, handleChange, slotDefault, slotTitle, slotScopeItem &#125; = <span class="keyword">this</span>;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> (</span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line">        &#123;name&#125;</span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;handleChange&#125;</span>&gt;</span>change name<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">        &#123;slotDefault&#125;</span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">        &#123;slotTitle&#125;</span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line"><span class="javascript">        &#123;slotScopeItem(&#123; <span class="attr">value</span>: <span class="string">"vue"</span> &#125;)&#125;</span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// Events.vue</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">"EventDemo"</span>,</span></span><br><span class="line">  props: &#123;</span><br><span class="line"><span class="javascript">    name: <span class="built_in">String</span></span></span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    handleChange(e) &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$emit(<span class="string">"change"</span>, e.target.value);</span></span><br><span class="line">    &#125;,</span><br><span class="line">    handleDivClick() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$emit(<span class="string">"change"</span>, <span class="string">""</span>);</span></span><br><span class="line">    &#125;,</span><br><span class="line">    handleClick(e, stop) &#123;</span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">"stop"</span>, stop);</span></span><br><span class="line">      if (stop) &#123;</span><br><span class="line">        e.stopPropagation();</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  render() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> &#123; name, handleChange, handleDivClick, handleClick &#125; = <span class="keyword">this</span>;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> (</span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="javascript">        name: &#123;name || <span class="string">"--"</span>&#125;</span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">value</span>=<span class="string">&#123;name&#125;</span> <span class="attr">onChange</span>=<span class="string">&#123;handleChange&#125;</span> /&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">onClick</span>=<span class="string">&#123;handleDivClick&#125;</span>&gt;</span></span></span><br><span class="line"><span class="xml">          <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;handleClick&#125;</span>&gt;</span>重置成功<span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span></span></span><br><span class="line"><span class="xml">          <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;e</span> =&gt;</span> handleClick(e, true)&#125;&gt;重置失败<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// Props.vue</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">"PropsDemo"</span>,</span></span><br><span class="line"><span class="javascript">  <span class="comment">// inheritAttrs: false,</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">// props: ['name', 'type', 'list', 'isVisible'],</span></span></span><br><span class="line">  props: &#123;</span><br><span class="line"><span class="javascript">    name: <span class="built_in">String</span>,</span></span><br><span class="line">    type: &#123;</span><br><span class="line"><span class="javascript">      validator: <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 这个值必须匹配下列字符串中的一个</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> [<span class="string">"success"</span>, <span class="string">"warning"</span>, <span class="string">"danger"</span>].includes(value);</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    list: &#123;</span><br><span class="line"><span class="javascript">      type: <span class="built_in">Array</span>,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 对象或数组默认值必须从一个工厂函数获取</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="function"><span class="params">()</span> =&gt;</span> []</span></span><br><span class="line">    &#125;,</span><br><span class="line">    isVisible: &#123;</span><br><span class="line"><span class="javascript">      type: <span class="built_in">Boolean</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="literal">false</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    onChange: &#123;</span><br><span class="line"><span class="javascript">      type: <span class="built_in">Function</span>,</span></span><br><span class="line"><span class="javascript">      <span class="keyword">default</span>: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    handleClick() &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 不要这么做、不要这么做、不要这么做</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">//this.type = "warning";</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">      <span class="comment">// 可以，还可以更好</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.onChange(<span class="keyword">this</span>.type === <span class="string">"success"</span> ? <span class="string">"warning"</span> : <span class="string">"success"</span>);</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  render() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> &#123; name, type, list, isVisible, handleClick &#125; = <span class="keyword">this</span>;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> (</span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line">        name: &#123;name&#125;</span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">        type: &#123;type&#125;</span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">        list: &#123;list&#125;</span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line">        isVisible: &#123;isVisible&#125;</span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">&#123;handleClick&#125;</span>&gt;</span>change type<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// Slot</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">"SlotDemo"</span>,</span></span><br><span class="line">  render() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> &#123; $scopedSlots &#125; = <span class="keyword">this</span>;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> (</span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line">        &#123;$scopedSlots.default()&#125;</span><br><span class="line">        &#123;$scopedSlots.title()&#125;</span><br><span class="line"><span class="javascript">        &#123;$scopedSlots.item(&#123; <span class="attr">value</span>: <span class="string">"vue"</span> &#125;)&#125;</span></span><br><span class="line"><span class="xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="十、为什么需要vuex"><a href="#十、为什么需要vuex" class="headerlink" title="十、为什么需要vuex"></a>十、为什么需要vuex</h2><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/19.png" alt></p>
<p><strong>Vuex运行机制</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/20.png" alt></p>
<p><strong>基本例子</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App.vue'</span></span><br><span class="line"></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  state: &#123;</span><br><span class="line">    count: <span class="number">0</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  mutations: &#123;</span><br><span class="line">    increment(state) &#123;</span><br><span class="line">      state.count++</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  actions: &#123;</span><br><span class="line">    increment(&#123;commit&#125;) &#123;</span><br><span class="line">      setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">        <span class="comment">// state.count++ // 不要对state进行更改操作，应该通过commit交给mutations去处理</span></span><br><span class="line">        commit(<span class="string">'increment'</span>)</span><br><span class="line">      &#125;, <span class="number">3000</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  getters: &#123;</span><br><span class="line">    doubleCount(state) &#123;</span><br><span class="line">      <span class="keyword">return</span> state.count * <span class="number">2</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  store,</span><br><span class="line">  render: <span class="function"><span class="params">h</span> =&gt;</span> h(App),</span><br><span class="line">&#125;).$mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// App.vue</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    &#123;&#123;count&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    &#123;&#123;$store.getters.doubleCount&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"$store.commit('increment')"</span>&gt;</span>count++<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"$store.dispatch('increment')"</span>&gt;</span>count++<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">'app'</span>,</span></span><br><span class="line">  computed: &#123;</span><br><span class="line">    count() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> <span class="keyword">this</span>.$store.state.count</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="十一、vuex核心概念和底层原理"><a href="#十一、vuex核心概念和底层原理" class="headerlink" title="十一、vuex核心概念和底层原理"></a>十一、vuex核心概念和底层原理</h2><h3 id="11-1-核心概念"><a href="#11-1-核心概念" class="headerlink" title="11.1 核心概念"></a>11.1 核心概念</h3><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/23.png" alt></p>
<h3 id="11-2-底层原理"><a href="#11-2-底层原理" class="headerlink" title="11.2 底层原理"></a>11.2 底层原理</h3><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/22.png" alt></p>
<p><strong>简化版本的vuex</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">const</span> Store = <span class="function"><span class="keyword">function</span> <span class="title">Store</span> (<span class="params">options = &#123;&#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> &#123;state = &#123;&#125;, mutations=&#123;&#125;&#125; = options</span><br><span class="line">  </span><br><span class="line">  <span class="comment">// 把state进行响应式和vue写法一样</span></span><br><span class="line">  <span class="keyword">this</span>._vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    data: &#123;</span><br><span class="line">      $$state: state</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">this</span>._mutations = mutations</span><br><span class="line">&#125;</span><br><span class="line">Store.prototype.commit = <span class="function"><span class="keyword">function</span>(<span class="params">type, payload</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">this</span>._mutations[type]) &#123;</span><br><span class="line">    <span class="keyword">this</span>._mutations[type](<span class="keyword">this</span>.state, payload)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">Object</span>.defineProperties(Store.prototype, &#123; </span><br><span class="line">  <span class="comment">// 当我们取值 如 $store.getter.count的时候就会触发这里</span></span><br><span class="line">  state: &#123; </span><br><span class="line">    <span class="keyword">get</span>: function()&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>._vm._data.$$state</span><br><span class="line">    &#125; </span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;Store&#125;</span><br></pre></td></tr></table></figure>
<h2 id="十二、vuex最佳实践"><a href="#十二、vuex最佳实践" class="headerlink" title="十二、vuex最佳实践"></a>十二、vuex最佳实践</h2><h3 id="12-1-核心概念"><a href="#12-1-核心概念" class="headerlink" title="12.1 核心概念"></a>12.1 核心概念</h3><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/23.png" alt></p>
<h3 id="12-2-使用常量代替Mutation事件类型"><a href="#12-2-使用常量代替Mutation事件类型" class="headerlink" title="12.2 使用常量代替Mutation事件类型"></a>12.2 使用常量代替Mutation事件类型</h3><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/24.png" alt></p>
<h3 id="12-3-命名空间"><a href="#12-3-命名空间" class="headerlink" title="12.3 命名空间"></a>12.3 命名空间</h3><blockquote>
<p>对所有模块开启命名空间</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/25.png" alt></p>
<h3 id="12-4-实践例子"><a href="#12-4-实践例子" class="headerlink" title="12.4 实践例子"></a>12.4 实践例子</h3><blockquote>
<p>DEMO地址 <a href="https://github.com/poetries/vuex-demo" target="_blank" rel="noopener">https://github.com/poetries/vuex-demo</a></p>
</blockquote>
<h2 id="十三、vue-router使用场景"><a href="#十三、vue-router使用场景" class="headerlink" title="十三、vue-router使用场景"></a>十三、vue-router使用场景</h2><h3 id="13-1-解决的问题"><a href="#13-1-解决的问题" class="headerlink" title="13.1 解决的问题"></a>13.1 解决的问题</h3><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/26.png" alt></p>
<h3 id="13-2-使用方式"><a href="#13-2-使用方式" class="headerlink" title="13.2 使用方式"></a>13.2 使用方式</h3><p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/27.png" alt></p>
<h3 id="13-3-例子"><a href="#13-3-例子" class="headerlink" title="13.3 例子"></a>13.3 例子</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> VueRouter <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./App.vue'</span></span><br><span class="line"><span class="keyword">import</span> routes <span class="keyword">from</span> <span class="string">'./routes'</span></span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">Vue.use(VueRouter)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  mode: <span class="string">'history'</span>,</span><br><span class="line">  routes,</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  router,</span><br><span class="line">  render: <span class="function"><span class="params">h</span> =&gt;</span> h(App),</span><br><span class="line">&#125;).$mount(<span class="string">'#app'</span>)</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">// App.vue</span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>router demo<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">  name: <span class="string">'app'</span>,</span></span><br><span class="line">  components: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css"><span class="selector-id">#app</span> &#123;</span></span><br><span class="line">  font-family: 'Avenir', Helvetica, Arial, sans-serif;</span><br><span class="line">  -webkit-font-smoothing: antialiased;</span><br><span class="line">  -moz-osx-font-smoothing: grayscale;</span><br><span class="line">  text-align: center;</span><br><span class="line"><span class="css">  <span class="selector-tag">color</span>: <span class="selector-id">#2c3e50</span>;</span></span><br><span class="line">  margin-top: 60px;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// routes.js</span></span><br><span class="line"><span class="keyword">import</span> RouterDemo <span class="keyword">from</span> <span class="string">'./components/RouterDemo'</span></span><br><span class="line"><span class="keyword">import</span> RouterChildrenDemo <span class="keyword">from</span> <span class="string">'./components/RouterChildrenDemo'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">'/foo'</span>, <span class="attr">component</span>: RouterDemo, <span class="attr">name</span>: <span class="string">'1'</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">'/bar'</span>, <span class="attr">component</span>: RouterDemo, <span class="attr">name</span>: <span class="string">'2'</span> &#125;,</span><br><span class="line">  <span class="comment">// 当 /user/:id 匹配成功，</span></span><br><span class="line">  <span class="comment">// RouterDemo 会被渲染在 App 的 &lt;router-view /&gt; 中</span></span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">'/user/:id'</span>, </span><br><span class="line">    component: RouterDemo, </span><br><span class="line">    name: <span class="string">'3'</span>,</span><br><span class="line">    props: <span class="literal">true</span>,</span><br><span class="line">    children: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 当 /user/:id/profile 匹配成功，</span></span><br><span class="line">        <span class="comment">// RouterChildrenDemo 会被渲染在 RouterDemo 的 &lt;router-view/&gt; 中</span></span><br><span class="line">        path: <span class="string">'profile'</span>,</span><br><span class="line">        component: RouterChildrenDemo,</span><br><span class="line">        name: <span class="string">'3-1'</span></span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 当 /user/:id/posts 匹配成功</span></span><br><span class="line">        <span class="comment">// RouterChildrenDemo 会被渲染在 RouterDemo 的 &lt;router-view/&gt; 中</span></span><br><span class="line">        path: <span class="string">'posts'</span>,</span><br><span class="line">        component: RouterChildrenDemo</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">'/a'</span>, <span class="attr">redirect</span>: <span class="string">'/bar'</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">'*'</span>, <span class="attr">component</span>: RouterDemo, <span class="attr">name</span>: <span class="string">'404'</span> &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> routes</span><br></pre></td></tr></table></figure>
<blockquote>
<p>更多详情 <a href="https://github.com/poetries/vue-router-demo" target="_blank" rel="noopener">https://github.com/poetries/vue-router-demo</a></p>
</blockquote>
<h2 id="十四、路由的类型及底层原理"><a href="#十四、路由的类型及底层原理" class="headerlink" title="十四、路由的类型及底层原理"></a>十四、路由的类型及底层原理</h2><p><strong>路由的类型</strong></p>
<ul>
<li><code>Hash</code>模式：无法使用锚点定位</li>
<li><code>History</code>模式：需要后端配合，IE9不兼容，可以使用强制刷新处理</li>
</ul>
<p><strong>原理</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/vue/28.png" alt></p>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2019/10/04/rn-icon-spash-setting/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2019/10/07/Ionic-ios-build/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
